<!--
* @FileDescription: 状态图页面
* @Author: yuec621@outlook.com
* @Date: 2024-11-13 12:46:13
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-15 09:57:57
-->
<template>
    <div class="pagestyle">
        <noDataChartCom v-if="state.nodataShow" @toolChange="toolChange" :searListData="state.searList"
            :lineConParams="state.lineConParams" :attrObj="state.attrObj" configtitle="状态图"></noDataChartCom>
        <div v-else>
            <div class="cardBox"
            
                :style="{backgroundColor:state.attrObj&&state.attrObj.chartBg?state.attrObj.chartBg:'#fff'}">
                <toolCom @toolChange="toolChange" :showToolList="state.showToolList"
                    :lineConParams="state.lineConParams" :searList="state.searList" :totaltoolList="state.totaltoolList"
                    :chartType="3" :timeRange="state.timeRangevalue" :lengedList="state.lengedList" :attrObj="state.attrObj">
                    <template v-slot:toolComTitle>
                        状态图配置
                    </template>
                </toolCom>
                <div v-loading="state.loading">
                    <statusChartCom  :chartList="state.chartList" :attrObj="state.attrObj"></statusChartCom>
                </div>
            </div>
            <div class="cardBox">
                <chartTable :curdShow="false" :tableheadsValue="state.tableheadsValue" :tabledata="state.tabledata"
                    :listSS="state.listSS" :pageconfig="state.pageconfig" @pagechangeSize="pagechangeSize"
                     @pagechange="pagechange">
                    <template v-slot:tabBoxList="row">
                        <span class="hover" v-for="item in state.tabList" :class="item.pointId==state.type?'bg':''"
                            @click="tabClick(item)">{{ item.pointId }}
                            {{ item.sensorName }}({{ item.openCount }})</span>
                    </template>
                    <template v-slot:listSS="{row,field}">
                        <span v-if="field=='pointValueStr'">
                            <el-tag
                                :type="row.pointValueStr.includes('无')||row.pointValueStr.includes('停')?'warning':'success'">
                                {{row.pointValueStr}}</el-tag>
                        </span>
                    </template>
                </chartTable>
            </div>
        </div>
    </div>
</template>
<script setup>
    import toolCom from "./chartCom/toolCom.vue";
    import statusChartCom from "./chartCom/statusChartCom.vue";
    import chartTable from "./chartCom/chartTable.vue";
    import noDataChartCom from "./chartCom/noDataChartCom.vue";
    import {
        computed,
        onMounted,
        reactive,
        provide
    } from "vue";
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import axios from "@/utils/request"
    import usePagesStore from '@/store/modules/pages'
    import dayjs from 'dayjs'
    const {
        proxy
    } = getCurrentInstance();
    const store = usePagesStore()
    const router = useRouter();
    let previewHttps =
        import.meta.env.VITE_APP_HTTP
    let state = reactive({
        loading:false,
        pageconfig:{
            currentPage:1,
            pageSize:10,
            total:0
        },
        nodataShow: false,
        showToolList: false, //查看曲线展示前一条后一条
        yinziList: [],
        tabList: [],
        tabledata: [],
        type: undefined,
        tableheadsValue: computed(() => table_headers.hisSwitchStateTable),
        lineConParams: {
            type:'D',
            pointUrl: "/simulate/history/attainPoints", //获取测点列表
            addTemSave: '/switch/template/add', //新增模板接口
            tempList: '/switch/template/list', //模板列表接口
            delTemp: '/switch/template/del', //删除模板接口
            hisSearchSave: '/point/history/add', //新增历史查询接口
            hisSearchList: '/point/history/list', //查询历史查询接口
            hisSearchDel: '/point/history/del', //删除历史查询接口
        },
        searList: [{
                label: "时间范围",
                id: "time",
                descList: [{
                    label: "时间范围",
                    type: "timeRangepage",
                    col: 24,
                    bindData: undefined,
                    field: "timeRange"
                }],
            },
            {
                label: "测点信息",
                id: "pointLocal",
                descList: [{
                    label: "传感器名称",
                    type: "select",
                    col: 24,
                    bindData: undefined,
                    options: [],
                    judcond: 'sensorchoiceName', //判断条件
                    field: 'choiceName',
                    fieldT: 'sensorName'
                }, ],
            },
            {
                label: "地点区域",
                id: "area",
                descList: [{
                        label: "所在区域",
                        type: "cascadercheckStrictly",
                        col: 24,
                        bindData: undefined,
                        options: [],
                        field: 'areaId',
                        fieldT: 'areaName',
                        judcond: 'areaName', //判断条件
                        props: {
                            children: "childList",
                            value: "id",
                            label: "areaName",
                            checkStrictly: true,
                            emitPath: false,
                        },
                    },
                    {
                        label: "安装地点",
                        type: "select",
                        col: 24,
                        bindData: undefined,
                        options: [],
                        field: "placeName",
                        judcond: 'placeName', //判断条件
                    },
                ],
            },
        ],
        pointIdList: [],
        splitNumber: 10,
        totaltoolList: [{
            name: '今',
            icon: 'jintian',
            type: 0,
            selname: '取消今日',
            show: true
        }, {
            name: '前一天',
            icon: 'qianyitian',
            type: 1,
            selname: '取消前一天',
            show: true
        }, {
            name: '后一天',
            icon: 'houyitian',
            type: 2,
            selname: '取消后一天',
            show: true
        }, {
            name: '事件日历',
            icon: 'rilishijian',
            type: 3,
            selname: '取消事件日历',
            show: true,
            disabled: true
        }, {
            name: '显示圆点',
            icon: 'yuandian',
            type: 4,
            selname: '取消显示圆点',
            show: true,
            disabled: true
        }, {
            name: '标尺',
            icon: 'biaochi',
            type: 5,
            selname: '取消标尺',
            show: true,
            disabled: true
        }, {
            name: '游标',
            icon: 'youbiao',
            type: 6,
            selname: '取消游标',
            show: true,
            disabled: true
        }, {
            name: '框选',
            icon: 'kuangxuan',
            type: 7,
            selname: '取消框选',
            show: true,
            disabled: true
        }, {
            name: '纵向放大',
            icon: 'zongxiangfangda',
            type: 10,
            selname: '取消纵向放大',
            show: true,
            disabled: true,
        }],
        attrList: [],
        attrObj: undefined,
        listSS: [{
            field: "pointValueStr"
        }],
        timeRangevalue: [],
        lengedList: [],
        attrList: []
    })
    // 获取状态图数据
    function getList(startTime, endTime) {
        state.loading=true
        axios.post('/pointData/switchStateLine', {
            pointIds: state.pointIdList,
            queryStartTime: startTime,
            queryEndTime: endTime,
        }).then(res => {
            if(res.data.switchPointLines!=null&&res.data.switchPointLines.length!=0){
                res.data.switchPointLines.forEach((item) => {
                    state.lengedList.forEach((itemsub) => {
                        if (item.pointId == itemsub.pointId) {
                            item.lengedList = itemsub.curlSwitchNodes;
                        }
                    });
                });
                state.chartList = res.data
                state.loading=false
            }
        })
    }
    // 获取表格数据
    function getTableList(startTime, endTime) {
        axios.post('/pointData/hisSwitchStateTable', {
            pointIds: state.pointIdList,
            queryStartTime: state.timeRangevalue[0],
            queryEndTime: state.timeRangevalue[1]
        }).then(res => {
            if (res.data.length > 0) {
                state.type = res.data[0].pointId
                state.tabList = res.data
                getTableListdetail()
            }
        })
    }
    function getTableListdetail(startTime, endTime) {
        axios.post('/pointData/hisSwitchStateTableDetail', {
            pointId: state.type,
            queryStartTime: state.timeRangevalue[0],
            queryEndTime: state.timeRangevalue[1],
            pageSize:state.pageconfig.pageSize,
            pageNum:state.pageconfig.currentPage
        }).then(res => {
            if (res.data.list.length > 0) {
                state.pageconfig.total=res.data.total
                state.tabledata = res.data.list
            }
        })
    }
    function pagechangeSize(val){
        state.pageconfig.currentPage=1
        state.pageconfig.pageSize=val
        getTableListdetail()
    }
    function pagechange(val) {
        getTableListdetail()
    }
    // 头部操作工具栏事件
    async function toolChange(val) {
        if (val.type == 'dateType') {
            if (val.data && val.data.length > 0) {
                let startTime = dayjs(val.data[0]).format('YYYY-MM-DD HH:mm:ss')
                let endTime = dayjs(val.data[1]).format('YYYY-MM-DD HH:mm:ss')
                state.timeRangevalue = [startTime, endTime]
                if (state.pointIdList.length > 0) {
                    localStorage.setItem('statusChart', JSON.stringify({
                        pointIds: state.pointIdList,
                        startTime: startTime,
                        endTime: endTime,
                        lengedList: state.lengedList,
                        attrObj:state.attrObj
                    }))
                    await getList(startTime, endTime)
                    await getTableList()
                } else {
                    proxy.$modal.msgWarning('请选择所要查询的测点编号!');
                }
            } else {
                proxy.$modal.msgWarning('请选择所要查询时间范围!');
            }
        } else if (val.type == '4') {
            state.symbolShow = val.data
        } else if (val.type == '5') {
            state.toolType = val.data
        } else if (val.type == '6') {
            state.toolType = val.data
        } else if (val.type == '10') {
            state.splitNumber -= 1
            if (state.splitNumber < 1) {
                state.splitNumber -= 0.1
                if (state.splitNumber < 0.1) {
                    state.splitNumber = 0.1
                }
            }
        } else if (val.type == '12') {
            state.toolType = val.type
        } else if (val.type == 'legendshow') {
            state.lengedList = val.data
            state.attrList = val.data
            state.pointIdList = val.data.map(item => {
                return item.pointId
            })
            state.nodataShow = false
        } else if (val.type == 'legend') {
            state.attrObj = val.attrObj
            state.lengedList = val.data
            state.attrList = val.data;
            state.pointIdList = val.data.map(item => {
                return item.pointId
            })
        }
    }

    function tabClick(item) {
        state.type = item.pointId
        getTableListdetail()
    }
    const props = defineProps({
        fromIndexpointId: Object
    })
    onMounted(() => {
        // localStorage.removeItem('statusChart')
        let hisChartStore = JSON.parse(localStorage.getItem('statusChart'))
        if (hisChartStore != null) {
            state.nodataShow = false
            state.pointIdList = hisChartStore.lengedList.map(item => {
                return item.pointId
            })
            state.lengedList = hisChartStore.lengedList
            if (hisChartStore.attrObj) {
                state.attrObj = hisChartStore.attrObj
            }
            state.timeRangevalue = [hisChartStore.startTime, hisChartStore.endTime]
            getList(hisChartStore.startTime, hisChartStore.endTime)
            getTableList(hisChartStore.startTime, hisChartStore.endTime)
        } else {
            if (props.fromIndexpointId) {
                state.nodataShow = false
                state.pointIdList=[props.fromIndexpointId.pointId]
                state.lengedList=[]
                state.timeRangevalue = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD hh:mm:ss')]
                getList(state.timeRangevalue[0], state.timeRangevalue[1])
                getTableList(state.timeRangevalue[0], state.timeRangevalue[1])
            }else{
                state.nodataShow = true
            }
        }
    })
</script>
<style lang="scss" scoped>
    .pagestyle {
        overflow-y: auto;

        .cardBox {
            padding: 10px;
            margin: 10px;
            border-radius: 8px;
            margin-top: 10px;
            background-color: rgba($color: #ffffff, $alpha: .6)
        }
    }
</style>